<template>
	<view class="notice" :style="{backgroundColor:itemStyle.background,color:itemStyle.textColor,padding:itemStyle.paddingTop+'px' + ' 10px'}">
		<view class="icon">
			 <image class="image" :src="params.icon" />
		</view>
		<view class="content">
			<view class="contentText" :animation="animationData">
			{{params.text}}
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object
		},
		data() {
			return {
				animation: null,
				animationData: {},
				speed: 30,
				width: undefined,
				wrapWidth: undefined,
				scrollable: true,
				elapse:null
			};
		},
		mounted() {
			this.createAni()
		},
		methods: {
			createAni() {
				let _this = this;
				var animation = uni.createAnimation({
					duration: 10000,
					timingFunction: "linear",
					delay: 2000,

				})

				//  animation.translateX(-100).step()
				 this.animationData = animation.export()
				uni.createSelectorQuery().in(this).select('.content').boundingClientRect((rect) => {
					if (!rect || !rect.width) {
						return;
					}
					_this.wrapWidth = rect.width;
					uni.createSelectorQuery().in(this).select('.contentText').boundingClientRect((rect) => {
						if (!rect || !rect.width) {
							return;
						}
						_this.width = rect.width;

						if (_this.scrollable && _this.wrapWidth < _this.width) {
							this.elapse = _this.width / _this.speed * 1000;
							var animation = uni.createAnimation({
								duration: this.elapse,
								timeingFunction: 'linear',
								delay: 0
							});
							var resetAnimation = uni.createAnimation({
								duration: 0,
								timeingFunction: 'linear'
							});
							this.animation = animation;
							this.resetAnimation = resetAnimation;
							this.scroll()
						}
					}).exec();

				}).exec();
			},
			scroll() {
				this.animationData=this.resetAnimation.translateX(this.wrapWidth).step().export();
				 setTimeout(()=>{
				      this.animationData=this.animation.translateX(-(this.elapse * this.speed) / 1000).step().export();
				 }, 100);
				 setTimeout(()=>{
					 this.scroll()
				 },this.elapse)
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.notice {
		width: 100vw;
		// height: 100rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		.icon {
			height: 36rpx;
			min-width: 40rpx;
			padding-top: 1rpx;
			box-sizing: border-box;
			image{
				height: 36rpx;
				width: 36rpx;
			}
		}

		.content {
			position: relative;
			-webkit-box-flex: 1;
			flex: 1;
			height: 36rpx;
			overflow: hidden;

			.contentText {
				position: absolute;
				white-space: nowrap;
			}

		}

	}
</style>
